<template>
	<view class="forget-container">
		<!-- 渐变背景 -->
		<view class="gradient-bg"></view>
		
		<!-- 重置密码卡片 -->
		<view class="forget-card">
			<!-- 标题区域 -->
			<view class="title-section">
				<text class="welcome-title">忘记密码</text>
				<text class="welcome-subtitle">请输入手机号重置密码</text>
			</view>
			
			<!-- 表单区域 -->
			<view class="form-section">
				<!-- 手机号输入框 -->
				<view class="input-group">
					<view class="input-wrapper">
						<view class="input-icon">
							<text class="icon">📱</text>
						</view>
						<input 
							v-model="form.phone" 
							placeholder="请输入手机号" 
							class="input-field"
							type="number"
						/>
					</view>
				</view>
				
				<!-- 验证码输入框 -->
				<view class="input-group">
					<view class="input-wrapper verify-wrapper">
						<view class="input-icon">
							<text class="icon">🔐</text>
						</view>
						<input 
							v-model="form.code" 
							placeholder="请输入验证码" 
							class="input-field verify-input"
							type="number"
						/>
						<view class="verify-btn" :class="{ 'disabled': !canGetCode }" @click="getCode">
							<text class="verify-btn-text">{{ tips }}</text>
						</view>
					</view>
				</view>
				
				<!-- 新密码输入框 -->
				<view class="input-group">
					<view class="input-wrapper">
						<view class="input-icon" @click="togglePasswordVisibility">
							<text class="password-icon">{{ showPassword ? '🔓' : '🔒' }}</text>
						</view>
						<input 
							v-model="form.password" 
							placeholder="请输入要重置的密码" 
							class="input-field"
							:type="showPassword ? 'text' : 'password'"
						/>
					</view>
				</view>
				
				<!-- 确认按钮 -->
				<view class="submit-btn" @click="submit">
					<text class="submit-btn-text">确认重置</text>
				</view>
				
				<!-- 返回登录 -->
				<view class="back-login" @click="backToLogin">
					<text class="back-text">返回登录</text>
				</view>
			</view>
		</view>
		
		<!-- 验证码提示弹窗 -->
		<view class="code-tip-modal" v-if="showCodeTip" @click="hideVerifyCodeTip">
			<view class="code-tip-content" @click.stop>
				<view class="code-tip-header">
					<text class="code-tip-title">验证码</text>
					<view class="code-tip-close" @click="hideVerifyCodeTip">
						<text class="close-icon">×</text>
					</view>
				</view>
				<view class="code-tip-body">
					<text class="code-tip-text">{{ currentVerifyCode }}</text>
					<text class="code-tip-desc">请输入上方验证码</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			form: {
				phone: '',
				code: '',
				password: ''
			},
			showPassword: false,
			seconds: 60,
			canGetCode: true,
			tips: '获取验证码',
			timer: null,
			currentVerifyCode: '', // 当前生成的验证码
			showCodeTip: false, // 是否显示验证码提示
			codeTipTimer: null, // 验证码提示定时器
			rules: {
				phone: [
					{
						required: true,
						message: '请输入手机号',
						trigger: 'blur,change'
					}
				],
				code: [
					{
						required: true,
						min: 4,
						type: 'number',
						message: '验证码格式错误',
						trigger: 'change'
					}
				],
				password: [
					{
						required: true,
						min: 6,
						message: '请输入密码',
						trigger: 'change'
					}
				]
			}
		};
	},
	methods: {
		// 生成随机6位验证码
		generateVerifyCode() {
			return Math.floor(100000 + Math.random() * 900000).toString();
		},
		// 显示验证码提示
		showVerifyCodeTip() {
			this.showCodeTip = true;
			// 5秒后自动隐藏
			this.codeTipTimer = setTimeout(() => {
				this.hideVerifyCodeTip();
			}, 5000);
		},
		// 隐藏验证码提示
		hideVerifyCodeTip() {
			this.showCodeTip = false;
			if (this.codeTipTimer) {
				clearTimeout(this.codeTipTimer);
				this.codeTipTimer = null;
			}
		},
		togglePasswordVisibility() {
			this.showPassword = !this.showPassword;
		},
		submit() {
			if (!this.form.phone) {
				uni.showToast({
					title: '请输入手机号',
					icon: 'none'
				});
				return;
			}
			if (!this.form.code) {
				uni.showToast({
					title: '请输入验证码',
					icon: 'none'
				});
				return;
			}
			if (!this.form.password) {
				uni.showToast({
					title: '请输入新密码',
					icon: 'none'
				});
				return;
			}
			if (this.form.password.length < 6) {
				uni.showToast({
					title: '密码长度不能少于6位',
					icon: 'none'
				});
				return;
			}
			
			// 验证手机号格式
			const phoneReg = /^1[3-9]\d{9}$/;
			if (!phoneReg.test(this.form.phone)) {
				uni.showToast({
					title: '请输入正确的手机号',
					icon: 'none'
				});
				return;
			}
			
			// 验证码验证
			if (this.form.code !== this.currentVerifyCode) {
				uni.showToast({
					title: '验证码错误，请重新输入',
					icon: 'none'
				});
				return;
			}
			
			// 检查用户是否存在
			const users = uni.getStorageSync('memo_users') || [];
			const userIndex = users.findIndex(user => user.phone === this.form.phone);
			
			if (userIndex === -1) {
				uni.showToast({
					title: '该手机号未注册',
					icon: 'none'
				});
				return;
			}
			
			// 更新用户密码
			users[userIndex].password = this.form.password;
			users[userIndex].updateTime = new Date().toISOString();
			uni.setStorageSync('memo_users', users);
			
			uni.showToast({
				title: '密码重置成功',
				icon: 'success'
			});
			
			setTimeout(() => {
				uni.navigateBack();
			}, 1500);
		},
		getCode() {
			if (!this.canGetCode) {
				uni.showToast({
					title: '请等待倒计时结束',
					icon: 'none'
				});
				return;
			}
			if (!this.form.phone) {
				uni.showToast({
					title: '请先输入手机号',
					icon: 'none'
				});
				return;
			}
			
			// 验证手机号格式
			const phoneReg = /^1[3-9]\d{9}$/;
			if (!phoneReg.test(this.form.phone)) {
				uni.showToast({
					title: '请输入正确的手机号',
					icon: 'none'
				});
				return;
			}
			
			// 检查手机号是否已注册
			const users = uni.getStorageSync('memo_users') || [];
			const userExists = users.some(user => user.phone === this.form.phone);
			
			if (!userExists) {
				uni.showToast({
					title: '该手机号未注册，请先注册账号',
					icon: 'none'
				});
				return;
			}
			
			this.canGetCode = false;
			this.startCountdown();
			
			// 生成随机验证码
			this.currentVerifyCode = this.generateVerifyCode();
			
			// 模拟发送验证码
			uni.showLoading({
				title: '正在发送验证码'
			});
			
			setTimeout(() => {
				uni.hideLoading();
				uni.showToast({
					title: '验证码已发送至您的手机',
					icon: 'success'
				});
				
				// 显示验证码提示
				setTimeout(() => {
					this.showVerifyCodeTip();
				}, 1700);
			}, 1000);
		},
		startCountdown() {
			let count = this.seconds;
			this.tips = `${count}s后重新获取`;
			
			this.timer = setInterval(() => {
				count--;
				if (count > 0) {
					this.tips = `${count}s后重新获取`;
			} else {
					this.tips = '获取验证码';
					this.canGetCode = true;
					clearInterval(this.timer);
				}
			}, 1000);
		},
		backToLogin() {
			uni.navigateBack();
		}
	},
	onLoad() {
		// 检查是否已经登录，如果已登录则跳转到首页
		const currentUser = uni.getStorageSync('memo_current_user');
		if (currentUser) {
			uni.showToast({
				title: '您已登录，无需重置密码',
				icon: 'none'
			});
			setTimeout(() => {
				uni.switchTab({
					url: '/pages/index/index'
				});
			}, 1500);
		}
	},
	onUnload() {
		if (this.timer) {
			clearInterval(this.timer);
		}
		if (this.codeTipTimer) {
			clearTimeout(this.codeTipTimer);
		}
	}
};
</script>

<style lang="scss" scoped>
.forget-container {
	width: 100%;
	height: 100vh;
	position: relative;
	overflow: hidden;
}

.gradient-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #a6c0fe 0%, #f68084 100%);
	z-index: 0;
}

.forget-card {
	position: relative;
	z-index: 1;
	width: 680rpx;
	margin: 0 auto;
	margin-top: 240rpx;
	background: #ffffff;
	border-radius: 40rpx;
	box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.1);
	padding: 80rpx 60rpx 60rpx;
}

.title-section {
	text-align: center;
	margin-bottom: 80rpx;
}

.welcome-title {
	display: block;
	font-size: 48rpx;
	font-weight: 600;
	color: #333;
	margin-bottom: 20rpx;
}

.welcome-subtitle {
	display: block;
	font-size: 28rpx;
	color: #666;
}

.form-section {
	width: 100%;
}

.input-group {
	margin-bottom: 40rpx;
}

.input-wrapper {
	position: relative;
	display: flex;
	align-items: center;
	background: #f8f9fa;
	border-radius: 25rpx;
	padding: 0 30rpx;
	height: 100rpx;
	border: 2rpx solid transparent;
	transition: all 0.3s ease;
}

.input-wrapper:focus-within {
	border-color: #a6c0fe;
	background: #fff;
	box-shadow: 0 0 20rpx rgba(166, 192, 254, 0.3);
}

.verify-wrapper {
	padding-right: 0;
}

.input-icon {
	margin-right: 20rpx;
	font-size: 36rpx;
	color: #999;
	cursor: pointer;
}

.icon {
	font-size: 36rpx;
}

.password-icon {
	transition: all 0.3s ease;
}

.input-field {
	flex: 1;
	font-size: 32rpx;
	color: #333;
	background: transparent;
	border: none;
	outline: none;
}

.verify-input {
	margin-right: 20rpx;
}

.input-field::placeholder {
	color: #999;
}

.verify-btn {
	background: linear-gradient(135deg, #a6c0fe 0%, #f68084 100%);
	border-radius: 20rpx;
	padding: 0 30rpx;
	height: 60rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 10rpx;
	transition: all 0.3s ease;
}

.verify-btn.disabled {
	background: #ccc;
}

.verify-btn-text {
	color: #fff;
	font-size: 24rpx;
	font-weight: 500;
	white-space: nowrap;
}

.submit-btn {
	width: 100%;
	height: 100rpx;
	background: linear-gradient(135deg, #a6c0fe 0%, #f68084 100%);
	border-radius: 25rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 40rpx;
	box-shadow: 0 10rpx 30rpx rgba(166, 192, 254, 0.4);
	transition: all 0.3s ease;
}

.submit-btn:active {
	transform: translateY(2rpx);
	box-shadow: 0 8rpx 25rpx rgba(166, 192, 254, 0.3);
}

.submit-btn-text {
	font-size: 32rpx;
	color: #fff;
	font-weight: 600;
}

.back-login {
	text-align: center;
}

.back-text {
	font-size: 28rpx;
	color: #a6c0fe;
}

/* 验证码提示弹窗样式 */
.code-tip-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.3);
	z-index: 9999;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding-top: 200rpx;
}

.code-tip-content {
	width: 480rpx;
	background: #fff;
	border-radius: 20rpx;
	box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.2);
	animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
	from {
		transform: translateY(-50rpx);
		opacity: 0;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}

.code-tip-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 30rpx 30rpx 20rpx;
	border-bottom: 1rpx solid #f0f0f0;
}

.code-tip-title {
	font-size: 32rpx;
	font-weight: 600;
	color: #333;
}

.code-tip-close {
	width: 50rpx;
	height: 50rpx;
	border-radius: 25rpx;
	background: #f5f5f5;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
}

.code-tip-close:active {
	background: #e0e0e0;
	transform: scale(0.95);
}

.close-icon {
	font-size: 32rpx;
	color: #666;
	font-weight: bold;
}

.code-tip-body {
	padding: 40rpx 30rpx;
	text-align: center;
}

.code-tip-text {
	display: block;
	font-size: 48rpx;
	font-weight: 700;
	color: #a6c0fe;
	letter-spacing: 8rpx;
	margin-bottom: 20rpx;
	font-family: 'Courier New', monospace;
}

.code-tip-desc {
	font-size: 28rpx;
	color: #666;
}
</style>